import React, { Component } from 'react';
import { Button, Tooltip } from 'antd'
import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
import TableColTools from './tools/ColTools'
import './style.less'
export default class TheQueryForm extends Component {
    constructor() {
        super()
        this.state = {
            search_show: true,
            columnsCheck: []
        }
    }
    componentDidMount() {
        this.setState({
            columnsCheck: this.props.columns.map(item => {
                return item.dataIndex
            })
        })
    }
    onTrigger() {
        this.setState({
            search_show: !this.state.search_show
        })
        this.props.onFormTrigger()
    }
    onUpdate() {
        this.props.onTableRefresh()
    }
    checkTools(values) {
        const { columns } = this.props

        console.log(values, 'values');
        this.setState({
            columnsCheck: values
        }, () => {
            const { columnsCheck } = this.state
            const newColumns = columns.filter(v => {
                v.ellipsis = true
                v.align = 'center'
                v.width = v.width ? v.width : 100
                if (columnsCheck.includes(v.dataIndex)) {
                    return v
                }

            })
            this.props.onColumnsFilter(newColumns)
        })
    }
    render() {
        const { search_show, columnsCheck } = this.state
        const { children, rowKey, columns } = this.props

        return (
            <div className='table-utils-extend'>
                <div className='table-utils-extend-l'>
                    {children}
                </div>
                <div className='table-utils-extend-r'>
                    <Tooltip placement="topLeft" title={search_show ? '隐藏搜索' : '显示搜索'}>
                        <Button htmlType="button" icon={<SearchOutlined />} shape="circle" onClick={() => this.onTrigger()} />
                    </Tooltip>
                    <Tooltip placement="topLeft" title={'刷新'}>
                        <Button htmlType="button" icon={<SyncOutlined />} shape="circle" onClick={() => this.onUpdate()} />
                    </Tooltip>
                    <Tooltip placement="topLeft" title={'刷新'}>
                        <TableColTools columns={columns} checkedList={columnsCheck} checkTools={(e) => this.checkTools(e)}></TableColTools>
                    </Tooltip>
                </div>
            </div>
        );
    }
}
